<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0; margin: 0;}
        li{
            height: 40px;
            line-height: 40px;
            border: 1px dashed #000;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div>
            <button class="btn">删除</button>
        </div>
        <ul class="list">
            <li class="first">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </ul>
    </div>
</body>
<script>
    // 节点: 文档节点 元素节点 属性节点 文本节点 注释节点

    // 节点删除:
    // Element.remove()                 自删(元素自己删除自己) 
    // parentElement.removeChild(node)  父删(通过父节点删除子节点) => 大义灭亲(前提:被删除的节点必须是父元素的子(代)节点)
    
    

    var ul = document.querySelector(".list");
    var mid = document.querySelector(".mid");
    var btn = document.querySelector(".btn");


    // 点击删除按钮 => 删除mid

    // 自删
    /* btn.onclick = function(){
        // 直接自删 => 没问题!!
        // mid.remove();  
        
        // 优化:
        if(mid){
            mid.remove();   //删除元素
            mid = null;    // 释放内存(元素已经被页面删除,没有必要在引用)
        }
        console.log(mid);
    }
 */

    btn.onclick = function(){
        // 父删de问题,重复删除某个元素会报错 => mid如果已经被删除,不能再次删除了, 此时mid已经不是ul的子节点
        // ul.removeChild(mid);
        
        
        // 优化:
        if(mid){
            ul.removeChild(mid);
            mid = null;    // 释放内存(元素已经被页面删除,没有必要在引用)
        }
        console.log(mid);
    }
 



</script>
</html>